// 初始化
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Reactjs in 40 </title>
  <style media="screen">
    .like-btn {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div class='wrapper'></div>
</body>

<script type="text/javascript">
  class Component {
    constructor(props = {}) {
      this.props = props
    }
    //  状态改变更新 ， 构建新的Dom  ， 替换旧的Dom
    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = this.renderDOM()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }
    //  添加点击事件 ， 点击事件可以触发setState ， 返回最新的Dom结构
    renderDOM () {
      this.el = createDOMFromString(this.render())
      if (this.onClick) {
        this.el.addEventListener('click', this.onClick.bind(this), false)
      }
      return this.el
    }
  }

  const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
  }

  const mount = (component, wrapper) => {
    // 进行第一次渲染
    wrapper.appendChild(component.renderDOM())
    // 同时绑定 节点替换函数
    component.onStateChange = (oldEl, newEl) => {
      wrapper.insertBefore(newEl, oldEl)
      wrapper.removeChild(oldEl)
    }
  }

  /* ========================================= */
  class LikeButton extends Component {
    constructor(props) {
      super(props)
      this.state = { isLiked: false }
    }

    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      return `
          <button class='like-btn' style="background-color: ${this.props.bgColor}">
            <span class='like-text'>
              ${this.state.isLiked ? '取消' : '点赞'}
            </span>
            <span>👍</span>
          </button>
        `
    }
  }

  class RedBlueButton extends Component {
    constructor(props) {
      super(props)
      this.state = {
        color: 'red'
      }
    }

    onClick () {
      this.setState({
        color: 'blue'
      })
    }

    render () {
      return `
          <div style='color: ${this.state.color};'>${this.state.color}</div>
        `
    }
  }

  const wrapper = document.querySelector('.wrapper')
  mount(new LikeButton({ bgColor: 'red' }), wrapper)
  mount(new LikeButton(), wrapper)
  mount(new RedBlueButton(), wrapper)
</script>

</html>